<template>
<div>
  <div class="box">
      <img :src="img" alt="" class="img">
      <p :style="{backgroundColor: colorStr}" @click="btn">{{name}}</p>
  </div> 
  </div>
</template>

<script>
export default {
    props: ["img","name"],
     data () {
        return {
           colorStr:'' 
        }
    },
    methods: {
        btn(){
            this.colorStr = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`
            this.$emit('love',this.name)
        },
        
    },
    
}
</script>

<style>
   .box {
       width: 400px;
      
       float: left;
       border: 1px solid #000;
       text-align: center;
      
   }
   .img {
       width: 100%;
       height: 500px;
   }
</style>